Implement Azure Local Network Config Tool - Frontend Wizard and Backend CLI #84

Copilot · 2026-01-29T14:41:04Z

Implements complete network switch configuration tool per design doc and roadmap: TypeScript wizard → JSON schema → Python CLI → vendor configs.

Architecture

Frontend (TypeScript/Vite) → Standard JSON → Backend (Python) → Dell OS10 .cfg
    4-step wizard              schema.json      validate/transform/generate

Frontend: TypeScript Migration

Converted 1,326-line JavaScript app to typed TypeScript with Vite build system.

Core modules:

types.ts - Schema-derived interfaces with strict typing
validator.ts - Ajv-based client validation
app.ts - Wizard state management and form logic
utils.ts - Display name mappings and helpers

Bundle: 20.5KB → 6.5KB gzipped, <300ms builds

Backend: Python CLI

Three-command pipeline with role-based transformations:

# Validate against JSON schema
python -m src.cli validate config.json

# Transform with computed values
python -m src.cli transform config.json

# Generate vendor configs
python -m src.cli generate config.json -o output/

Pipeline:

validator.py - jsonschema validation + cross-reference checks (VLANs, port-channels, BGP prefix lists)
transformer.py - Role-specific computed values:
- TOR1: VRRP priority 150, MLAG priority 1, MST priority 8192
- TOR2: VRRP priority 100, MLAG priority 32667, MST priority 16384
- BMC: null values (no MLAG/BGP)
renderer.py - Jinja2 template engine with vendor selection
templates/ - 8 Dell OS10 production templates

Testing

Backend: 29 pytest tests, 80% coverage
Frontend: TypeScript strict mode, zero compilation errors
E2E: Playwright test suite for wizard flows
Security: CodeQL scan passes (0 alerts)

Example Usage

Frontend wizard exports Standard JSON:

{
  "switch": {
    "vendor": "dellemc",
    "role": "TOR1",
    "hostname": "rack1-tor1"
  },
  "vlans": [...],
  "bgp": {...}
}

Backend processes to Dell OS10 config with computed priorities:

hostname rack1-tor1
vrrp priority 150
vpc priority 1
spanning-tree mst 0 priority 8192

Deployment

GitHub Pages workflow updated for TypeScript build. Frontend served statically, backend runs locally via CLI.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

esm.ubuntu.com
- Triggering command: /usr/lib/apt/methods/https /usr/lib/apt/methods/https nerator e_modules/.bin/s--noprofile node /hom�� d/index.html git rgo/bin/bash --global credential.helpediff work_Switch_Conf--name-only bash --no�� assword=$GITHUB_TOKEN"; }; f get assword=$GITHUB_TOKEN"; }; f get cal/bin/bash get --global /home/REDACTED/.coplaywright install chromium --with-deps tr (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Start implementation

The user has attached the following file paths as relevant context:

.github/copilot-instructions.md

[Chronological Review: The conversation began with the user requesting a comprehensive project refresh based on design and roadmap documents. The user specified the need for a granular implementation plan, including file-level details, dependency analysis, consistency checks, logic breakdowns, and validation steps. The user then provided additional notes for refinement, emphasizing the importance of the design and roadmap as the single source of truth, the need for standard JSON definitions, and the requirement for acceptance criteria. The user also inquired about backend development plans and requested a complete plan for all phases (2, 3, and 4) to facilitate a smooth transition to cloud execution. The user made further requests to refine example JSON, install Playwright for validation, and reiterated that both frontend and backend development needed to be refreshed based on the new design and roadmap. The conversation culminated in the user asking to run the implementation in the cloud and to start the implementation.]

[Intent Mapping:

"I want to perform a comprehensive project refresh based on #design-doc.md and #roadmap.md." - Request for a detailed implementation plan.
"there are few notes pls update accordingly:" - Request for updates based on additional notes.
"I did not see any backend dev plan, are you plan for next phase?" - Inquiry about backend development.
"can you pls plan all phases to be done..." - Request for a complete plan for multiple phases.
"one more minor thing in phase2, pls refine the example json..." - Request for specific refinements in JSON.
"laso, I installed phaywright..." - Informing about Playwright installation for validation.
"Ok, pls provide the full plan, and let me review it again" - Request for a complete plan for review.
"just to make it clear, the frontend has not been finished..." - Clarification on the status of the frontend.
"same thing to backend, nothing being done so far..." - Clarification on the backend status and request for a refresh.
"looks good, can you run this in cloud?" - Request to execute the plan in the cloud.
"Start implementation" - Command to initiate the implementation.]

[Technical Inventory:

Tools: create_file (used to create the implementation plan file).
Technologies: Playwright (for validation).
Documentation: design-doc.md, roadmap.md (as sources of truth for the project).]

[Code Archaeology: No specific code files or functions were discussed in detail, but the user emphasized the need for a comprehensive plan that includes file modifications and logic breakdowns.]

[Progress Assessment: The user has outlined the need for a complete implementation plan covering multiple phases, with specific requests for refinements and clarifications. The frontend and backend development are both acknowledged as needing a refresh.]

[Context Validation: All critical information for continuation is captured, including user requests for specific refinements, the need for a comprehensive plan, and the emphasis on using design and roadmap documents as references.]

[Recent Commands Analysis:

Last Agent Commands: The user requested to "run this in cloud" and "Start implementation."
Tool Results Summary: The tool 'create_file' was referenced for creating the implementation plan, but no specific results were returned as the focus was on preparing the plan.
Pre-Summary State: The agent was actively preparing to execute the implementation plan in the cloud when the token budget was exceeded.
Operation Context: These commands were executed to align with the user's goal of transitioning the project to the cloud for execution and implementation.]

1. Conversation Overview: - Primary Objectives: The user requested a comprehensive project refresh based on design and roadmap documents, emphasizing the need for a detailed implementation plan and specific refinements. - Session Context: The conversation progressed from initial requests for a project refresh to detailed inquiries about backend development, JSON refinements, and the overall implementation plan for multiple phases. - User Intent Evolution: The user's needs evolved from seeking a detailed plan to requesting specific refinements and clarifications, culminating in a request to run the implementation in the cloud.

Technical Foundation:

Design Document: design-doc.md - serves as a single source of truth for the project.
Roadmap Document: roadmap.md - outlines project milestones and acceptance criteria.
Tool: Playwright - installed for validation purposes.

Codebase Status:

No specific files or code segments were detailed, but the user emphasized the need for a comprehensive plan that includes file modifications and logic breakdowns.

Problem Resolution:

Issues Encountered: The use...

Created from VS Code.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

- Created validator.ts with Ajv schema validation - Created utils.ts with typed utility functions - Created app.ts with full TypeScript conversion of app.js - Created main.ts as entry point - Updated index.html to use TypeScript module - Added @types/node dev dependency - Updated types.ts to include dhcp_relay and preempt fields - All TypeScript type checking passes - Vite build successful Co-authored-by: liunick-msft <105009141+liunick-msft@users.noreply.github.com>

- Add qos field to Interface type definition - Import Firmware and DeploymentPattern types - Extract MLAG constants (peer link ID, native VLAN, members) - Replace inline onclick handlers with event delegation for routes - Remove 'as any' type assertions with proper type casts - Export setupRouteDelegation function for main.ts Co-authored-by: liunick-msft <105009141+liunick-msft@users.noreply.github.com>

Co-authored-by: liunick-msft <105009141+liunick-msft@users.noreply.github.com>

…ration - Task 3.2: Created StandardValidator with JSON schema validation and cross-reference checks - Task 3.3: Created Transformer with role-based computed values (TOR1/TOR2/BMC) - Task 3.4: Created ContextBuilder with helper flags for templates - Task 3.5: Created Renderer with Jinja2 template support - Task 3.6: Created CLI with validate/transform/generate commands - Task 3.7: Created Dell OS10 templates (system, vlan, interface, port_channel, mlag, bgp, prefix_list, full_config) - Task 3.8: Created pytest tests for validator, transformer, and CLI (29 tests, 80% coverage) - Fixed dell-tor1.json and dell-tor2.json to include missing VLAN 99 All tests pass. CLI commands working: validate, transform, generate. Co-authored-by: liunick-msft <105009141+liunick-msft@users.noreply.github.com>

Co-authored-by: liunick-msft <105009141+liunick-msft@users.noreply.github.com>

Initial plan

f23b087

Copilot AI assigned Copilot and liunick-msft Jan 29, 2026

Copilot started work on behalf of liunick-msft January 29, 2026 14:41 View session

Copilot AI and others added 6 commits January 29, 2026 14:53

Complete Phase 2 frontend TypeScript migration with Vite

6d634bc

Co-authored-by: liunick-msft <105009141+liunick-msft@users.noreply.github.com>

Add backend README documentation

7d29198

Complete Phase 4 integration testing and documentation

df06d07

Co-authored-by: liunick-msft <105009141+liunick-msft@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Start implementation of project refresh plan~~ Implement Azure Local Network Config Tool - Frontend Wizard and Backend CLI Jan 29, 2026

Copilot AI requested a review from liunick-msft January 29, 2026 15:24

Copilot finished work on behalf of liunick-msft January 29, 2026 15:24

update design doc

6efbd73

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Azure Local Network Config Tool - Frontend Wizard and Backend CLI #84

Implement Azure Local Network Config Tool - Frontend Wizard and Backend CLI #84

Uh oh!

Copilot AI commented Jan 29, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Implement Azure Local Network Config Tool - Frontend Wizard and Backend CLI #84

Are you sure you want to change the base?

Implement Azure Local Network Config Tool - Frontend Wizard and Backend CLI #84

Uh oh!

Conversation

Copilot AI commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Architecture

Frontend: TypeScript Migration

Backend: Python CLI

Testing

Example Usage

Deployment

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Jan 29, 2026 •

edited

Loading